<template>
  <el-card>
    <div class="card-title">
      异常日志
    </div>
    <div class="search-container">
      <el-input class="keyword-inp" v-model="searchModel.keyword" placeholder="输入关键词查询">
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
      <el-button @click="handleResetClick" icon="Refresh">重置</el-button>
      <el-button type="primary" @click="handleSearchClick" icon="Search">搜索</el-button>
    </div>
    <div class="log-container">
      <el-table :data="errorData">
        <el-table-column label="状态" align="center" width="80px">
          <el-tag type="danger" size="large">异常</el-tag>
        </el-table-column>
        <el-table-column prop="optModule" label="操作模块" align="center"></el-table-column>
        <el-table-column prop="optType" label="操作类型" align="center">

        </el-table-column>
        <el-table-column prop="optDesc" label="操作描述" align="center"></el-table-column>
        <el-table-column prop="requestMethod" label="请求方式" align="center">
          <template #default="scope">
            <el-tag :type="methodTextMapType(scope.row.requestMethod)">{{ scope.row.requestMethod }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="操作人员" align="center"></el-table-column>
        <!-- <el-table-column prop="ipAddress" label="登陆IP" align="center"></el-table-column>
        <el-table-column prop="ipSource" label="登陆地址" align="center"></el-table-column> -->
        <el-table-column prop="createTime" label="操作日期" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="80px">
          <template #default="scope">
            <el-button type="primary" icon="View" size="small" link @click="reviewClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination-container"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.current"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="searchModel.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <el-dialog width="60%" v-model="detailVisible">
        <template #header>
          <div style="display: flex; align-items: center;">
            <el-icon style="margin-right: 5px; font-size: 20px;"><View /></el-icon>
            <span>异常信息</span>
          </div>
        </template>
        <el-form>
          <div class="form">
            <el-row>
              <el-col :span="8">
                <el-form-item label="IP">
                  {{ detailModel.ipAddress }}
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="操作地址">
                  <span>{{ detailModel.ipSource }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="操作模块">
                {{ detailModel.optModule }}
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="请求地址">
                  <div class="reqAddress" title="点击复制请求地址" @click="handleCopyAddress">
                    <span>{{ detailModel.optUrl }}</span>
                    （点击复制）
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="请求方式">
                  <el-tag :type="methodMapType(detailModel.requestMethod!)" size="large">{{ detailModel.requestMethod }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="操作方法">
                  {{ detailModel.optMethod }}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="请求参数">
                  {{ detailModel.requestParam }}
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="操作人员">
                  {{ detailModel.nickname }}
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="返回数据">
              <div id="responseView">
              </div>
              <div style="background: #787878; color: #fff;">
                <!-- {{ detailModel.responseData }} -->
              </div>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue'
import { queryErrorList } from '@/service/common/log'
import showMsg from '@/utils/message/message';
import { methodMapType, methodTextMapType } from '@/utils/global/method-map-type'
import useJsonToDom from '@/hook/useJsonToDom'
import type { IErrorItem } from './types'
import type { IErrorLogParams } from '@/types/common'


const total = ref<number>(0)
const errorData = ref<IErrorItem[]>()
const detailVisible = ref<boolean>(false)
const detailModel = reactive<IErrorItem>({
  nickname: '',
  optMethod: '',
  optModule: '',
  optUrl: '',
  requestMethod: '',
  requestParam: '',
  responseData: '',
  ipAddress: '',
  ipSource: ''
})
const searchModel = ref<IErrorLogParams>({
  current: 1,
  size: 10,
  keyword: ''
})

const handleResetClick = () => {
  searchModel.value = {
    current: 1,
    size: 10,
    keyword: ''
  }
  refreshPage()
}
const handleSearchClick = () => {
  refreshPage(true)
}

/**
 * 修改显示条数回调
 * @param size 显示条数
 */
 const handleSizeChange = (size: number) => {
  searchModel.value.size = size
  refreshPage()
}

/**
 * 修改当前页回调
 * @param current 当前页
 */
const handleCurrentChange = (current: number) => {
  searchModel.value.current = current
  refreshPage()
}


/**
 * 查看
 * @param operation 日志信息
 */
 const reviewClick = (operation: IErrorItem) => {
  detailVisible.value = true
  detailModel.nickname = operation.nickname
  detailModel.optMethod = operation.optMethod
  detailModel.optModule = operation.optModule
  detailModel.optUrl = operation.optUrl
  detailModel.requestMethod = operation.requestMethod
  detailModel.requestParam = operation.requestParam
  detailModel.responseData = operation.responseData
  detailModel.ipAddress = operation.ipAddress
  detailModel.ipSource = operation.ipSource


  nextTick(() => {
    const responseViewEl = document.getElementById('responseView')
    console.log(responseViewEl);

    useJsonToDom(detailModel.responseData!, responseViewEl!)
  })
}

/**
 * 点击复制请求地址
 */
 const handleCopyAddress = async () => {
  const reqAddrEl = document.querySelector('.reqAddress span') as HTMLElement
  const text = reqAddrEl.innerText
  if (!text) return

  await navigator.clipboard.writeText(reqAddrEl.innerText)
  showMsg('success', '复制成功')
}


const refreshPage = (isShowMsg: boolean = false) => {
  queryErrorList(searchModel.value)
    .then((res) => {
      if (res.code === 2001) {
        if (isShowMsg) showMsg('success', '查询成功')
        errorData.value = res.data.records
        total.value = res.data.total
      }
    })
}

const init = () => {
  refreshPage()
}

init()
</script>

<style lang="less" scoped>
.search-container {
  display: flex;
  justify-content: flex-end;
  .keyword-inp {
    width: 240px !important;
    margin-right: 10px;
  }
  margin-bottom: 20px;
}
.log-container {
  .form {
    padding: 10px 20px;
  }
  .reqAddress {
    span {
      cursor: pointer;
      border-bottom: 2px dashed #6A9AF2;
      transition: all .2s;
      &:hover {
        color: #6A9AF2;
      }
    }
  }
}
</style>
